<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

interface ProfileData {
  realName: string
  gender: string
  birthDate: string
  phone: string
  email: string
  province: string
  city: string
  district: string
  bio: string
}

const profileForm = ref<ProfileData>({
  realName: '张小明',
  gender: 'male',
  birthDate: '2000-05-15',
  phone: '138****5678',
  email: 'xiaoming@example.com',
  province: '浙江省',
  city: '杭州市',
  district: '西湖区',
  bio: '热爱学习，积极向上的阳光少年。'
})

const genderOptions = [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' },
  { label: '保密', value: 'secret' }
]

const provinceOptions = ref(['浙江省', '江苏省', '上海市', '北京市', '广东省'])
const cityOptions = ref(['杭州市', '宁波市', '温州市', '绍兴市'])
const districtOptions = ref(['西湖区', '滨江区', '余杭区', '拱墅区'])

const handleSave = () => {
  ElMessage.success('个人资料保存成功！')
  console.log('保存的资料：', profileForm.value)
}

const handleReset = () => {
  ElMessage.info('已重置为原始数据')
}
</script>

<template>
  <div class="profile-form">
    <div class="form-header">
      <h3 class="form-title">个人资料</h3>
      <p class="form-desc">完善您的个人信息，让我们更好地为您服务</p>
    </div>

    <el-form :model="profileForm" label-width="100px" label-position="left" class="form-content">
      <el-form-item label="真实姓名">
        <el-input v-model="profileForm.realName" placeholder="请输入真实姓名" clearable />
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="profileForm.gender">
          <el-radio
            v-for="option in genderOptions"
            :key="option.value"
            :value="option.value"
            border
          >
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="出生日期">
        <el-date-picker
          v-model="profileForm.birthDate"
          type="date"
          placeholder="选择出生日期"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="手机号码">
        <el-input v-model="profileForm.phone" placeholder="请输入手机号码" clearable />
      </el-form-item>

      <el-form-item label="邮箱地址">
        <el-input v-model="profileForm.email" placeholder="请输入邮箱地址" clearable />
      </el-form-item>

      <el-form-item label="所在地区">
        <div class="region-selector">
          <el-select v-model="profileForm.province" placeholder="请选择省份">
            <el-option
              v-for="province in provinceOptions"
              :key="province"
              :label="province"
              :value="province"
            />
          </el-select>
          <el-select v-model="profileForm.city" placeholder="请选择城市">
            <el-option
              v-for="city in cityOptions"
              :key="city"
              :label="city"
              :value="city"
            />
          </el-select>
          <el-select v-model="profileForm.district" placeholder="请选择区县">
            <el-option
              v-for="district in districtOptions"
              :key="district"
              :label="district"
              :value="district"
            />
          </el-select>
        </div>
      </el-form-item>

      <el-form-item label="个人简介">
        <el-input
          v-model="profileForm.bio"
          type="textarea"
          :rows="4"
          placeholder="介绍一下自己吧~"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>

      <el-form-item>
        <div class="form-actions">
          <el-button type="primary" size="large" @click="handleSave">
            保存修改
          </el-button>
          <el-button size="large" @click="handleReset">
            重置
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.profile-form {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.1);
}

.form-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f9ff;
}

.form-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.form-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.form-content {
  max-width: 600px;
}

.region-selector {
  display: flex;
  gap: 12px;
  width: 100%;
}

.region-selector .el-select {
  flex: 1;
}

.form-actions {
  display: flex;
  gap: 16px;
}

.form-actions .el-button {
  min-width: 120px;
}

/* Element Plus样式覆盖 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: var(--text-primary);
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 0 0 1px #e0e0e0 inset;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--primary-color) inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--primary-color) inset;
}

:deep(.el-radio.is-bordered) {
  border-radius: 20px;
  transition: all 0.3s ease;
}

:deep(.el-radio.is-bordered.is-checked) {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.3);
}

:deep(.el-button--default) {
  border-radius: 24px;
  border-color: #e0e0e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-form {
    padding: 20px;
  }

  .form-content {
    max-width: 100%;
  }

  .region-selector {
    flex-direction: column;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .el-button {
    width: 100%;
  }
}
</style>
